<template>
  <div id="allmap">

  </div>
</template>

<script>
import axios from 'axios'

export default {
  data(){
    return {
      map: {}
    }
  },
  methods: {
    //主模块
    loadMainJScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=Nw8Rz1ZqOfsUdYVK2TLuQN4fANGWvYWl';
      script.onload = () => {
        this.loadBoxJScript();
      }
      document.body.appendChild(script);
    },
    //自定义窗口模块
    loadBoxJScript() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = '/js/infobox.js';
      script.onload = () => {
        this.init();
      }
      document.body.appendChild(script);
    },
    init() {
      this.map = new BMap.Map("allmap");  // 创建Map实例
      this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 12); // 创建点坐标
      this.map.setCurrentCity("北京"); 
      this.map.enableScrollWheelZoom(true);  // 启用滚轮放大缩小
      this.addMarker()
    },
    //创建点
    addMarker(){
      // 标记点
      let icon = new BMap.Icon(
        'https://th.bing.com/th/id/Red11c61d0df7c746da08b3efdb2febd9?rik=cgw%2fH%2bHJIHSKsA&riu=http%3a%2f%2fwww.huluxiazy.com%2fzb_users%2fupload%2f2020%2f06%2f202006041591264027351822.jpg&ehk=taMBxdc5nKyRHAc1lML7CY4VZx2YqH4Rsd7929hiIjo%3d&risl=&pid=ImgRaw',
        new BMap.Size(50, 50)
      )
      icon.setImageSize(icon.size)// 让图片大小适中
      var marker = new BMap.Marker(new BMap.Point(116.404, 39.915), {
        icon: icon
      });
      this.map.addOverlay(marker); 

      // 点击标记点出现的弹窗
      var opts = {
        width : 200,     // 信息窗口宽度
        height: 100,     // 信息窗口高度
        title : "海底捞王府井店" , // 信息窗口标题
        enableMessage:true,//设置允许信息窗发送短息
        message:"亲耐滴，晚上一起吃个饭吧？戳下面的链接看下地址喔~"
      }
      var infoWindow = new BMap.InfoWindow("地址：北京市东城区王府井大街88号乐天银泰百货八层", opts);  // 创建信息窗口对象 
      marker.addEventListener("click", function(){          
        //this.map.openInfoWindow(infoWindow, marker.point); //开启信息窗

        //自定义窗口
        axios.get('/html/template.html').then(res => {
          var html = [res.data];
          var infoBox = new BMapLib.InfoBox(this.map,html.join(""),{
            boxStyle:{
              background:"url('tipbox.gif') no-repeat center top"
              ,width: "270px"
              ,height: "300px"
            }
            ,closeIconMargin: "1px 1px 0 0"
            ,enableAutoPan: true
            ,align: INFOBOX_AT_TOP
          });
          infoBox.open(marker);
        })
      });
    }
  },
  mounted(){
    this.loadMainJScript();
  }
}
</script>

<style lang="scss">
#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
